<template>
  <div>
    <el-table :data="tableData" border v-loading="loading" :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
      <el-table-column fixed prop="id" label="id" width="90"></el-table-column>
      <el-table-column label="图片" width="70">
        <el-image :src="pet1"></el-image>
      </el-table-column>
      <el-table-column prop="cat_id" label="猫咪编号" width="120"></el-table-column>
      <el-table-column prop="user_id" label="用户编号" width="120"></el-table-column>
      <el-table-column prop="cat_is_coupon" label="支持优惠券" width="120"></el-table-column>
      <el-table-column prop="cat_count" label="数量/只" width="120"></el-table-column>
      <el-table-column prop="cat_price" label="价格/元" width="140"></el-table-column>
      <el-table-column prop="cat_all_price" label="总价/元" width="140"></el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-button slot="reference" type="success" icon="el-icon-edit" style="font-size:10px;"
                     @click="edit(scope.row)">修改
          </el-button>
          <el-popconfirm title="确定删除吗?" @confirm="delCars(scope.row)">
            <el-button slot="reference" type="warning" icon="el-icon-delete" style="font-size:10px;">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next"
                   :total="total" page-size="5" @current-change="page"
                   style="margin:20px;display: inline-block;">
    </el-pagination>

    <el-button type="primary" @click="updateAllPrice()">更新总价</el-button>
  </div>
</template>

<script>
  import pet4 from '../../assets/pet4.jpg'

  const axios = require('axios')
  export default {
    name: "Cars",
    data() {
      return {
        tableData: null,
        pageSize: '1',
        total: null,
        loading: false,
        pet1: pet4,
        cat_count: '1'
      }
    },
    methods: {
      page(currentPage) {
        const _this = this
        this.$axios.get('http://localhost:9000/cars/findPage/' + currentPage + '/5').then(function (resp) {
          _this.tableData = resp.data.content
          _this.pageSize = resp.data.size
          _this.total = resp.data.totalElements
        })
      },
      edit(row) {
        const _this = this
        _this.$router.push({
          path: '/myUpdate/updateCars',
          query: {
            id: row.id
          }
        });
      },
      delCars(row) {
        const _this = this
        _this.$message('id' + row.id + '已删除')
        axios.delete('http://localhost:9000/cars/delById/' + row.id).then(function (resp) {
          _this.$alert('id<' + row.id + '>已删除', '消息', {
            confirmButtonText: '确定',
            callback: action => {
              window.location.reload()
            }
          });
        })
      },
      reduceCount(row) {
        const _this = this
        _this.$message('编号' + row.id + '数量减少')
        axios.get('http://localhost:9000/cars/reduceCatCount/' + row.id).then(function (resp) {
          if (resp.data == 'number cannot be 0') {
            _this.$alert('数量为0，不能再减少!', '消息', {
              confirmButtonText: '确定'
            });
          } else {
            window.location.reload()
          }
        })
      },
      addCount(row) {
        const _this = this
        //_this.$message('编号' + row.id + '数量增加')
        axios.get('http://localhost:9000/cars/addCatCount/' + row.id).then(function (resp) {
          window.location.reload()
        })
      },
      updateAllPrice() {
        const _this = this
        axios.get('http://localhost:9000/cars/updateAllPrice').then(function (resp) {
          window.location.reload()
          console.log('更新总价完成')
          _this.$message('更新总价完成')
        })
      }
    },
    created() {
      //alert('查询id' + this.$route.query.id + ' 登录名:' + cookie.get('loginName'))
      // 调用后台接口  向用户对应的id 添加对应的商品id
      const _this = this
      axios.get('http://localhost:9000/cars/findPage/1/5/').then(function (resp) {
        console.log(resp)
        _this.tableData = resp.data.content
        _this.pageSize = resp.data.size
        _this.total = resp.data.totalElements
      })
    }
  }
</script>

<style>
  .el-button--warning {
    background: red;
  }
</style>
